<template>
  <div style="overflow: hidden">
    客服中心交易流水记录表
    <el-table :data='tableData'>
      <el-table-column show-overflow-tooltip label='序号' prop='TARN_NUM'></el-table-column>
      <el-table-column show-overflow-tooltip label='交易日期' prop='TRAN_DATETIME'></el-table-column>
      <el-table-column show-overflow-tooltip label='币种' prop='CCY'></el-table-column>
      <el-table-column show-overflow-tooltip label='交易类型' prop='CR_DR_MAINT_IND'></el-table-column>
      <el-table-column show-overflow-tooltip label='交易金额'>
        <template slot-scope="props">
          <span :style="props.row.TRAN_AMT_FMT>0? 'color: #e50112': 'color:#0aa946'">
            {{props.row.TRAN_AMT_FMT}}
          </span>
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip label='余额' prop='BAL_FMT'></el-table-column>
      <el-table-column show-overflow-tooltip label='交易渠道' prop='SOURCE_TYPE'></el-table-column>
      <el-table-column show-overflow-tooltip label='交易信息' prop='TRAN_DESC'></el-table-column>
      <el-table-column show-overflow-tooltip label='摘要信息' prop='NARRATIVE'></el-table-column>
    </el-table>
    <div style="text-align: center">
      <el-pagination background @size-change="handleSizeChange" @current-change="changePage"
        :page-sizes="[20, 40, 60, 80]" :page-size="pagination.pageSize" :current-page.sync='pagination.currentPage'
        layout='prev, sizes, pager, next, total, jumper' :total='pagination.total' :pageSize='10'>
      </el-pagination>
    </div>
  </div>
</template>
<script>
  import commonApi from '@/api/common.js'
  import { Notification } from 'element-ui'
  // 客服中心交易流水记录表
  export default {
    data() {
      return {
        tableData: [],
        pagination: {
          currentPage: 1,
          total: 0,
          pageSize: 20
        }
      }
    },
    created() {
    },
    watch: {

    },
    mounted() {
      this.getTableData()
    },
    methods: {
      handleNodeClick() { },
      // 切换页码
      changePage(val) {
        this.pagination.currentPage = val
        this.getTableData()
      },
      // 可以调整每页条数
      handleSizeChange(val) {
        this.pagination.pageSize = val
        this.getTableData()
      },
      // 获取数据表
      getTableData() {
        // 参数有待确认
        commonApi.getTransactionFlow(this.pagination).then(response => {
          if (response.retcode === '0') {
            this.tableData = response.data.info
            this.pagination.total = response.data.total
          } else {
            Notification.error('数据返回失败')
          }
        })
      }
    }
  }
</script>
<style scoped>
  .left {
    float: left;
    width: 20%;
    border: 1px solid #1f92ef;
  }

  .right {
    float: left;
    width: 79%;
    border: 1px solid #1f92ef;
  }
</style>